<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= title %></title>

	<% include ../includes/head%>
	<style type="text/css">
        .panel-body{
            padding: 30px 50px 0 50px;
        }
        .form-group{
            margin-bottom: 35px;
        }
        .panel-title{
            font-size: 24px;
            font-weight: bold;
        }
        .message, .check{
        	position: absolute;
        	margin-left: 20px;
        	margin-top: 8px;
        	display: none
        }
        .error .message{
			display: block;
			color: red;
        }
        
		.err .check{
			display: block;
			color: red;
		}

    </style>
    <script type="text/javascript">

	    $(function(){
	    	$('.panel-body input').focus(function(e){
	    		$(e.target).parent('.form-group').removeClass('err');
	    		$(e.target).parent('.form-group').removeClass('error');
	    	})
	    })
	    function checkname(e){
	    	
	    	if(!$('#username').val()){
	    		$('#username').parent('.form-group').addClass('error');
	    		return false
	    	}else{
	    		return true
	    	}
	    }
	    function checkpassword(e){
	    	if(!$('#password').val()){
	    		$('#password').parent('.form-group').addClass('error');
	    		return false;
	    	}else{
	    		return true;
	    	}
	    }
	    function checkemail(e){
	    	var email =$('#email').val();
	    	if(email){
				if (email.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1){
		    		$('#email').parent('.form-group').addClass('error');
		    	}
	    	}
	    	
	    }
	    function checktel(e){
	    	var tel = $('#tel').val();
	    	if(tel){
	    		if(tel.search(/^(\+\d{2,3})?\d{11}$/) == -1){
		    		$('#tel').parent('.form-group').addClass('error');
		    	}
	    	}
	    	
	    }
	    function confirm(e){
	    	if($('#confirmpwd').val()){
	    		if($('#confirmpwd').val() != ($('#password').val())){
	    			$('#confirmpwd').parent('.form-group').addClass('error');
	    			return false;

	    		}else{
	    			return true;
	    		}
	    	}else{
	    		$('#confirmpwd').parent('.form-group').addClass('err');
	    		return false;
	    	}
	    }
	    
        function register(){
        	var name = $('#username').val(),
                password = $('#password').val(),
                email = $('#email').val(),
                tel = $('#tel').val();
           	var data = { "name": name, "password":password,"email": email, "tel": tel};

        	if(checkname() && checkpassword() && confirm()){
        		$.ajax({
	                url:'/user/signup',
	                type:'POST',
	                data:data,
	                success:function(data,status){
	                   
	                    location.href='register';
	                },
	                error:function(data,err){
	                    location.href='register';
	                }
	            });
        	}
           
            
            
        }
    </script>
</head>
<body>
<div class="container web-body" style="margin-top:50px;width: 980px;">
    <%- message %>
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading" style="height: 50px;">
                    <div class="panel-title" style="text-align: left">用户注册</div>
                </div>
                <div class="panel-body">
                    <form action="#" class="form-horizontal" role="form" method="post" >
                        <div class="form-group">
                            <input id="username" type="text" class="form-control" name="username"  onblur="checkname()" placeholder="用户名" />
                            <span class="message">*请输入用户名</span>
                            
                        </div>
                        <div class="form-group">
                            <input id="password" type="password" class="form-control" name="password" onblur="checkpassword()" placeholder="密码" />
                            <span class="message">*请输入密码</span>
                            
                        </div>
                        <div class="form-group">
                            <input id="confirmpwd" type="password" class="form-control" name="confirmpwd" onblur="confirm()" placeholder="确认密码" />
                            <span class="message">*两次密码不一样</span>
                            <span class="check">*请输入密码</span>

                        </div>
                        <div class="form-group">
                            <input id="email" type="text" class="form-control" name="email" onblur="checkemail()" placeholder="邮箱" />
                            <span class="message">*请输入正确邮箱</span>
                        </div>
                        <div class="form-group">
                            <input id="tel" type="text" class="form-control" name="tel" onblur="checktel()" placeholder="手机号" />
                            <span class="message">*请输入正确手机号</span>
                        </div>
                        <div class="form-group">
                            <input type="button" class="btn btn-success btn-block" onclick="register()" value="注 册" />
                            <a href="login" class="btn btn-primary" style="float: right;margin-top: 20px;">登 录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
	      


	

	
</body>
</html>